<template>
  <!-- $t is vue-i18n global function to translate lang -->
  <div class="app-container">
    <el-row :gutter="16">
      <el-col :span="24" :xs="24">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="任务名称">
            <el-input v-model="queryParams.name" placeholder="任务名称" />
          </el-form-item>
          <el-form-item label="运行状态">
            <el-select v-model="queryParams.runFlag" placeholder="运行状态" :clearable="true">
              <el-option label="未运行" value="0" />
              <el-option label="已运行" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="querySearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="24" :xs="24">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
            @click="handleUpdate">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-video-play" size="mini" :disabled="single" :loading="runloading"
            @click="handleRun">运行</el-button>
        </el-col>
        <el-col :span="1.5" v-if="false">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
            @click="handleDelete">删除</el-button>
        </el-col>
      </el-col>
      <el-col :span="24" :xs="24">
        <el-table v-loading="listLoading" @selection-change="handleSelectionChange" :data="list" style="width: 100%;">
          <el-table-column type="selection" width="50" align="center" :selectable="selectEnable" />
          <el-table-column align="center" label="id" width="95">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column label="任务名称">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="系统" width="110" align="center">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.business | businessName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="系统表" width="215" align="center">
            <template slot-scope="scope">
              {{ scope.row.tableTopicId }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="任务类型" width="110">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.workType | workTypeName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="任务时间" width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.workDay }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="分区表" width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.partitionTable }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="并行度" width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.tableThreads }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="运行状态" width="110">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.runFlag | runFlagName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="执行时间" width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.workStarttime }}</span>
            </template>
          </el-table-column>
        </el-table>
        
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务名称" prop="name">
              <el-input v-model="form.name" placeholder="任务名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="系统" prop="business">
              <el-select v-model="form.business" placeholder="系统">
                <el-option label="核心" value="hbnx_core" />
                <el-option label="信贷" value="hbnx_credit" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="系统表" prop="tableTopicId">
              <el-input v-model="form.tableTopicId" placeholder="请输入系统表" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务类型" prop="workType">
              <el-select v-model="form.workType" placeholder="任务类型" @change="workChange">
                <el-option label="补数" value="1" />
                <el-option label="重抽" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.workType == 1" label="补数时间" prop="workDay">
              <el-input v-model="form.workDay" :readonly="true" placeholder="任务时间" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.workType == 1" label="并行度" prop="tableThreads">
              <el-input-number v-model="form.tableThreads" :min="1" :max="10" label="请输入用户密码"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.workType == 2" label="执行时间" prop="workStarttime">
              <el-date-picker v-model="form.workStarttime" :picker-options="pickerOptions0"
                value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.workType == 2" label="分区表" prop="partitionTable">
              <el-select v-model="form.partitionTable" placeholder="分区表">
                <el-option label="否" value="0" />
                <el-option label="是" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-loading="btnloading" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listComplement, addComplement, updateComplement, getComplement, runComple } from '@/api/ogg'
import pagination from '@/components/Pagination'
import { getDay } from '@/utils'
// options components
export default {
  name: 'Complx',
  components: { pagination },
  data() {
    return {
      list: [],
      listLoading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        runFlag: undefined,
      },
      total: 0,
      single: true,
      multiple: true,
      autoWidth: true,
      btnloading: false,
      runloading:false,
      columns: [],
      ids: [],
      form: { id: undefined },
      open: false,
      title: '添加',
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" },
          { min: 1, max: 100, message: '名称长度必须介于 1 和 100 之间', trigger: 'blur' }
        ],
        business: [
          { required: true, message: "系统不能为空", trigger: "blur" }
        ],
        tableTopicId: [
          { required: true, message: "表不能为空", trigger: "blur" }
        ],
        workType: [
          { required: true, message: "任务类型不能为空", trigger: ["blur", 'change'] }
        ],
        tableThreads: [
          { required: false, message: "并行度不能为空", trigger: ["blur", 'change'] }
        ],
        workStarttime: [
          { required: false, message: "运行时间不能为空", trigger: ["blur", 'change'] }
        ],
        workDay: [
          { required: false, message: "补数时间不能为空", trigger: ["blur", 'change'] }
        ],
        partitionTable: [
          { required: false, message: "分区表不能为空", trigger: ["blur", 'change'] }
        ]
      }
    }
  },
  created() {

  },
  mounted() {
    this.getList()
  },
  filters: {
    businessName(f) {
      return f == 'hbnx_core' ? '核心' : "信贷";
    },
    workTypeName(f) {
      return f == '1' ? "补数" : "重抽";
    },
    runFlagName(f) {
      return f == '0' ? '未运行' : '已运行'
    }
  },
  methods: {
    querySearch() {
      this.queryParams.pageNum = 1;
      this.getList()
    },
    getList() {
      this.listLoading = true;
      listComplement(this.queryParams).then(res => {
        this.list = res.rows;
        this.total = res.total
      }).finally(() => {
        this.listLoading = false;
      });
    },
    handleAdd() {
      this.reset()
      this.open = true;
      this.title = "添加任务";
    },
    // 表单重置
    reset() {
      var dy = getDay(-1)
      this.form = {
        name: undefined,
        business: undefined,
        tableTopicId: undefined,
        workType: undefined,
        workDay: dy,
        tableThreads: undefined,
        workStarttime: undefined,
        partitionTable: undefined,
        id: undefined
      }
      if (this.$refs["form"]) {
        this.$refs["form"].resetFields();
      }
    },
    handleUpdate() {
      getComplement({ id: this.ids[0] }).then(res => {
        this.open = true;
        this.title = "修改任务"
        if (res.data) {
          this.form = res.data
        }
      }).finally(() => {

      })

    },
    handleDelete() {

    },
    handleRun() {
      this.runloading=true;
      runComple({ id: this.ids[0] }).then(res => {
        this.getList();
        this.$message.success("开始运行")
      }).finally(res => {
        this.runloading=false;
      })
    },
    selectEnable(row, rowIndex) {
      if (row.runFlag == 1) {
        return false;
      } else {
        return true;
      }
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    submitForm() {

      this.$refs["form"].validate(valid => {
        if (valid) {
          this.btnloading = true;
          if (this.form.id != undefined) {
            updateComplement(this.form).then(response => {
              this.$message.success("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.btnloading = false;
            });
          } else {
            addComplement(this.form).then(response => {
              this.$message.success("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.btnloading = false
            });
          }
        }
      });
    },
    workChange(v) {

      if (v == '1') {
        this.rules.workDay[0].required = true;
        this.rules.tableThreads[0].required = true;
        this.rules.workStarttime[0].required = false;
        this.rules.partitionTable[0].required = false;
      } else {
        this.rules.workDay[0].required = false;
        this.rules.tableThreads[0].required = false;
        this.rules.workStarttime[0].required = true;
        this.rules.partitionTable[0].required = true;
      }
    }

  }
}
</script>

<style>
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
</style>
